<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010431-曹鹏</title>
    <link rel="stylesheet" href="./css/caopeng.css">
    <link rel="stylesheet" href="iconfonts/fonts/iconfont.css">
    <link rel="stylesheet" href="iconfonts/icon/fonts/iconfont.css">
    <link rel="stylesheet" href="css/rankingList.css">
</head>

<body>
    <header class="cao-nav">
        <div class="cao-content">
            <div class="cao-left">
                <div class="cao-logo">
                    <span class="iconfont icon-tengxunshipin"></span>
                    <span class="cao-ten">腾讯视频</span>
                </div>
                <ul>
                    <li><a href="#" class="cao-home-link">首页</a></li>
                    <li><a href="#">VIP会员</a></li>
                    <li><a href="#">电视剧</a></li>
                    <li><a href="#">电影</a></li>
                    <li><a href="#">综艺</a></li>
                    <li><a href="#">动漫</a></li>
                    <li><a href="#">少儿</a></li>
                    <li><a href="#">全部</a></li>
                </ul>
            </div>
            <div class="cao-right">
                <div class="cao-search">
                    <form>
                        <input type="text" value="吞噬星空剧场版 血洛...">
                        <button class="iconfont icon-sousuo"></button>
                    </form>
                </div>
                <ul>
                    <li><a href="#" class="cao-VIP">
                            <p class="iconfont icon-vip1"></p>
                            <p>会员专区</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-airudiantubiaohuizhi-zhuanqu_youxi"></p>
                            <p>游戏</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-lishi"></p>
                            <p>历史</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-video"></p>
                            <p>创作</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-a-huaban1fuben10"></p>
                            <p>客户端</p>
                        </a></li>
                    <li><a href="#">
                            <img src="image/头像.png">
                        </a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="cao-topBanner">
        <div class="cao-banner">
            <div class="cao-bg">
                <div>
                    <p class="cao-shang">全网影视</p>
                    <p class="cao-xia">排行榜</p>
                </div>
            </div>
        </div>
    </div>
    <article>
        <h1>热搜榜</h1>
        <div class="cao-classify">
        </div>
    </article>
    <footer>
        <div class="cao-line">
            <hr size="3px" color="#ff5c38">
        </div>
        <div class="cao-footer">
            <div class="cao-links1">
                <dl>
                    <dt>特色推荐</dt>
                    <dd><a href="#">自制推荐</a></dd>
                    <dd><a href="#">杀毒软件</a></dd>
                </dl>
            </div>
            <div class="cao-links2">
                <h4>软件下载</h4>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#iPhone">
                        <span class="iconfont icon-mobile"></span>
                        <p>手机版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Windows">
                        <span class="iconfont icon-windows"></span>
                        <p>Windows 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Mac">
                        <span class="iconfont icon-mac"></span>
                        <p>Mac 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Pad">
                        <span class="iconfont icon-ipad1"></span>
                        <p>iPad 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#TV">
                        <span class="iconfont icon-diannaoduan"></span>
                        <p>TV 版</p>
                    </a>
                </div>
            </div>
            <div class="cao-links3">
                <dl>
                    <dt>服务</dt>
                    <dd><a href="#">客服</a></dd>
                    <dd><a href="#">反馈</a></dd>
                    <dd><a href="#">侵权投诉</a></dd>
                    <dd><a href="#">免广告合作</a></dd>
                    <dd><a href="#">vip 采购</a></dd>
                </dl>
            </div>
        </div>
        <div class="cao-speak">
            <p>粤网文[2017]6138-1456 号 | 网络视听许可证 1904073 号 | 增值电信业务经营许可证:粤 B2-20090059 | 粤公网安备 44030002000001 号</p>
            <p>关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
            <p>Copyright © 1998 - 2024 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有</p>
        </div>
    </footer>
    <!-- 登录表单 -->
    <div id="loginModal" class="cao-modal">
        <div class="cao-modal-content">
            <span class="cao-close">&times;</span>
            <form id="loginForm">
                <input type="number" id="username" placeholder="手机号" required>
                <input type="password" id="password" placeholder="密码" required>
                <input type="submit" value="登录">
            </form>
        </div>
    </div>
    <script>
        const data = [
            {
                name: '热搜',
                item: ['九重紫', '永夜星河', '猎罪图鉴2', '黑白森林', '猎罪图鉴', '婚内婚外', '斗罗大陆之燃魂站']
            },
            {
                name: '电视剧',
                item: ['九重紫', '永夜星河', '猎罪图鉴2', '黑白森林', '猎罪图鉴', '婚内婚外', '斗罗大陆之燃魂站']
            },
            {
                name: '少儿',
                item: ['汪汪队立大功第八季', '小猪佩奇第10季', '宝贝第五季', '熊出没合集', '宝宝巴士儿歌', '炫卡斗士', '奶龙与小七大战暴暴龙']
            },
            {
                name: '综艺',
                item: ['汪汪队立大功第八季', '小猪佩奇第10季', '宝贝第五季', '熊出没合集', '宝宝巴士儿歌', '炫卡斗士', '奶龙与小七大战暴暴龙']
            },
            {
                name: '动漫',
                item: ['汪汪队立大功第八季', '小猪佩奇第10季', '宝贝第五季', '熊出没合集', '宝宝巴士儿歌', '炫卡斗士', '奶龙与小七大战暴暴龙']
            },
            {
                name: '电影',
                item: ['汪汪队立大功第八季', '小猪佩奇第10季', '宝贝第五季', '熊出没合集', '宝宝巴士儿歌', '炫卡斗士', '奶龙与小七大战暴暴龙']
            }
        ];
        const modle = document.querySelector('.cao-classify');
        let s = '';
        for (const item of data) {
            s = s + `
       <div class="cao-modle">
           <div class="title">
               <h3>${item.name}</h3>
               <span>更多 &gt;</span>
           </div>
           <ol>
               <li>
                   <span>1</span><p>${item.item[0]}</p>
               </li>
               <li>
                   <span>2</span><p>${item.item[1]}</p>
               </li>
               <li>
                   <span>3</span><p>${item.item[2]}</p>
               </li>
               <li>
                   <span>4</span><p>${item.item[3]}</p>
               </li>
               <li>
                   <span>5</span><p>${item.item[4]}</p>
               </li>
               <li>
                   <span>6</span><p>${item.item[5]}</p>
               </li>
               <li>
                   <span>7</span><p>${item.item[6]}</p>
               </li>
           </ol>
       </div>
       `;
        }
        modle.innerHTML = s;

        // 获取首页链接元素
        const homeLink = document.querySelector('.cao-home-link');
        if (homeLink) {
            homeLink.addEventListener('click', function (event) {
                event.preventDefault();
                window.location.href = 'index.html';
            });
        }

        // 获取元素
        var cao_modal = document.getElementById("loginModal");
        var btn = document.querySelector("img[src='image/头像.png']");
        var span = document.getElementsByClassName("cao-close")[0];
        var usernameInput = document.getElementById("username");
        var passwordInput = document.getElementById("password");

        // 点击头像打开模态框
        btn.onclick = function () {
            cao_modal.style.display = "block";
            // 清空之前的输入
            usernameInput.value = '';
            passwordInput.value = '';
        };

        // 点击×关闭模态框
        span.onclick = function () {
            cao_modal.style.display = "none";
        };

        // 点击模态框外部关闭模态框
        window.onclick = function (event) {
            if (event.target == cao_modal) {
                cao_modal.style.display = "none";
            }
        };

        // 表单提交事件
        document.getElementById("loginForm").addEventListener("submit", function (event) {
            event.preventDefault();
            // 获取用户输入的用户名和密码
            var username = usernameInput.value;
            var password = passwordInput.value;

            // 这里添加您的登录逻辑，以下为示例
            if (username === "13084185671" && password === "22001010431") {
                // 登录成功，隐藏模态框
                cao_modal.style.display = "none";
                // 这里可以添加登录成功后的逻辑，如页面跳转或状态更新
                console.log("登录成功");
                // 例如：window.location.href = '/dashboard'; // 重定向到仪表盘
            } else {
                // 登录失败，显示错误消息
                alert("用户名或密码错误");
            }
        });
    </script>
</body>

</html>